<template>
  <el-form ref="formRef" :model="state.formData" label-width="120px">
    <div class="fieldset">
      <div class="legend">基本属性</div>
      <slot name="property-task-type" :model="state.formData" field="type">
        <el-form-item label="任务类型">
          <el-input v-model="state.formData.type" :disabled="true"></el-input>
        </el-form-item>
      </slot>

      <slot name="property-task-name" :model="state.formData" field="name">
        <el-form-item label="任务名称">
          <el-input v-model="state.formData.name" :disabled="true"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-task-display_name"
        :model="state.formData"
        field="display_name"
      >
        <el-form-item label="显示名称">
          <el-input v-model="state.formData.display_name"></el-input>
        </el-form-item>
      </slot>
    </div>

    <div class="fieldset">
      <div class="legend">样式设置</div>
      <el-form-item label="宽度">
        <el-input-number v-model="state.formData.width" controls-position="right" />
      </el-form-item>
      <el-form-item label="高度">
        <el-input-number v-model="state.formData.height" controls-position="right" />
      </el-form-item>
      <el-form-item label="边线宽度">
        <el-input-number
          :min="1"
          :max="5"
          v-model="state.formData.linewidth"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="主题颜色">
        <el-color-picker v-model="state.formData.fill" />
      </el-form-item>
      <el-form-item label="文字颜色">
        <el-color-picker v-model="state.formData.stroke" />
      </el-form-item>
    </div>

    <div class="fieldset">
      <div class="legend">拦截设置</div>
      <slot
        name="property-task-pre_iterceptors"
        :model="state.formData"
        field="pre_iterceptors"
      >
        <el-form-item label="前置拦截器">
          <el-input v-model="state.formData.pre_iterceptors"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-task-post_interceptors"
        :model="state.formData"
        field="post_interceptors"
      >
        <el-form-item label="后置拦截器">
          <el-input v-model="state.formData.post_interceptors"></el-input>
        </el-form-item>
      </slot>
    </div>

    <div class="fieldset">
      <div class="legend">审批设置</div>
      <slot name="property-task-assignee" :model="state.formData" field="assignee">
        <el-form-item label="参与者">
          <el-input v-model="state.formData.assignee"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-task-assignment_handler"
        :model="state.formData"
        field="assignment_handler"
      >
        <el-form-item label="参与者处理类">
          <el-input v-model="state.formData.assignment_handler"></el-input>
        </el-form-item>
      </slot>
    </div>

    <div class="fieldset">
      <div class="legend">审批模式</div>
      <slot name="property-task-task_type" :model="state.formData" field="task_type">
        <el-form-item label="任务类型">
          <el-select v-model="state.formData.task_type" placeholder="请选择任务类型">
            <el-option label="主办任务" value="Major"></el-option>
            <el-option label="协办任务" value="Aidant"></el-option>
          </el-select>
        </el-form-item>
      </slot>

      <slot
        name="property-task-perform_type"
        :model="state.formData"
        field="perform_type"
      >
        <el-form-item label="参与类型">
          <el-select v-model="state.formData.perform_type" placeholder="请选择参与类型">
            <el-option label="普通参与" value="ANY"></el-option>
            <el-option label="会签参与" value="ALL"></el-option>
          </el-select>
        </el-form-item>
      </slot>
    </div>

    <div class="fieldset">
      <div class="legend">订阅设置</div>
      <slot
        name="property-task-reminder_time"
        :model="state.formData"
        field="reminder_time"
      >
        <el-form-item label="提醒时间">
          <el-input v-model="state.formData.reminder_time"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-task-reminder_repeat"
        :model="state.formData"
        field="reminder_repeat"
      >
        <el-form-item label="重复间隔时间">
          <el-input v-model="state.formData.reminder_repeat"></el-input>
        </el-form-item>
      </slot>

      <slot name="property-task-expire_time" :model="state.formData" field="expire_time">
        <el-form-item label="期待完成时间">
          <el-input v-model="state.formData.expire_time"></el-input>
        </el-form-item>
      </slot>

      <slot name="property-task-callback" :model="state.formData" field="callback">
        <el-form-item label="回调处理">
          <el-input v-model="state.formData.callback"></el-input>
        </el-form-item>
      </slot>

      <slot
        name="property-task-auto_execute"
        :model="state.formData"
        field="auto_execute"
      >
        <el-form-item label="是否自动完成">
          <el-select v-model="state.formData.auto_execute" placeholder="">
            <el-option label="是" value="Y"></el-option>
            <el-option label="否" value="N"></el-option>
          </el-select>
        </el-form-item>
      </slot>
    </div>

    <div class="fieldset">
      <div class="legend">扩展属性</div>
      <el-row class="mb10">
        <el-col :span="24" class="text-right">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              添加
              <SvgIcon name="ele-ArrowDown" :size="17" title="添加扩展属性" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  command="countersign_type"
                  v-if="state.formData.perform_type == 'ALL'"
                  >会签类型</el-dropdown-item
                >
                <el-dropdown-item
                  command="countersign_completion_condition"
                  v-if="state.formData.perform_type == 'ALL'"
                  >会签条件</el-dropdown-item
                >
                <el-dropdown-item command="user_key">用户标识</el-dropdown-item>
                <el-dropdown-item command="group_key">用户组标识</el-dropdown-item>
                <el-dropdown-item command="candidate_users">候选用户</el-dropdown-item>
                <el-dropdown-item command="candidate_groups">候选用户组</el-dropdown-item>
                <el-dropdown-item command="candidate_handler"
                  >候选处理类</el-dropdown-item
                >
                <el-dropdown-item command="attr1">额外属性1</el-dropdown-item>
                <el-dropdown-item command="attr1">额外属性2</el-dropdown-item>
                <el-dropdown-item command="attr1">额外属性3</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
      <el-form
        ref="fieldRef"
        :model="state.field"
        label-width="120px"
        class="task-field-form"
      >
        <el-form-item
          v-for="key in Object.keys(state.field)"
          :key="key"
          :label="getLabel(key)"
        >
          <template v-if="key === 'countersign_type'">
            <el-select
              v-model="state.field[key]"
              placeholder="请选择会签类型"
              style="flex: 1"
            >
              <el-option label="并联会签" value="PARALLEL"></el-option>
              <el-option label="顺序会签" value="SEQUENTIAL"></el-option>
            </el-select>
          </template>

          <template v-else>
            <el-input v-model="state.field[key]" style="flex: 1"></el-input>
          </template>

          <span
            @click="removeFilled(key)"
            style="cursor: pointer; color: #409eff; width: 50px; padding-left: 10px"
          >
            <SvgIcon name="ele-RemoveFilled" :size="17" title="移除" color="black" />
          </span>
        </el-form-item>
      </el-form>
    </div>
  </el-form>
</template>

<script lang="ts">
import { reactive, ref, watch, defineProps, onMounted, defineEmits } from "vue";
import { FlowFormModel } from "../types";
export default {
  name: "ingeniousTask",
};
</script>

<script setup lang="ts">
const props = defineProps<{
  modelValue: FlowFormModel;
  extendAttrConfig: {
    // 扩展属性配置
    type: Object;
  };
}>();

const emits = defineEmits(["update:modelValue"]);

const state = reactive({
  formData: {} as FlowFormModel,
  field: {},
  fieldItems: [
    { label: "会签类型", value: "countersign_type" },
    { label: "会签完成条件", value: "countersign_completion_condition" },
    { label: "用户标识", value: "user_key" },
    { label: "用户组标识", value: "group_key" },
    { label: "候选用户", value: "candidate_users" },
    { label: "候选用户组", value: "candidate_groups" },
    { label: "候选处理类", value: "candidate_handler" },
    { label: "额外属性1", value: "attr1" },
    { label: "额外属性2", value: "attr2" },
    { label: "额外属性3", value: "attr3" },
  ],
});

/**
 * 获取label
 */
const getLabel = (key) => {
  for (let i = 0; i < state.fieldItems.length; i++) {
    if (state.fieldItems[i].value === key) {
      return state.fieldItems[i].label;
    }
  }
  return null;
};

const handleCommand = (command: string | number | object) => {
  let value = "";
  if (state.field.hasOwnProperty(command)) {
    state.field[command] = value;
  } else {
    state.field[command] = value;
  }
};

const removeFilled = (key: string) => {
  if (state.field.hasOwnProperty(key)) {
    delete state.field[key];
  }
};

/**
 * 赋值扩展属性
 */
const handleFieldData = (data) => {
  state.field = {};
  if (data.field) {
    state.field = data.field ?? {};
  }
};

watch(
  () => state.formData,
  (n, o) => {
    emits("update:modelValue", Object.assign(props.modelValue, state.formData));
  },
  { deep: true }
);

watch(
  () => state.field,
  (n, o) => {
    state.formData.field = JSON.parse(JSON.stringify(state.field));
  },
  { deep: true }
);

onMounted(() => {
  Object.assign(state.formData, props.modelValue);
  handleFieldData(state.formData);
});
</script>
<style lang="scss" scoped>
.task-field-form {
  min-height: 50px;
  margin-bottom: 20px;
}
.text-right {
  text-align: right; /* 文本靠右对齐 */
}
</style>
